<template>
  <div class="wrap">
    <div class="side" v-if="querySide">
      <div class="img">
        <img src="~@imgs/bag.png" alt="">
      </div>
      <div class="timeAndSide">
        <span class="time">{{time}}</span>
        <span class="side">{{placeValue}}号馆</span>
      </div>
      <div v-for="(item, $index) in signData" :key="$index">
        <sign-mould :userName=item.userName :sign=item.signIn :gray="item.signIn=='已签到'"></sign-mould>
      </div>
      <div class="goBack" @click="goBack">
        <button-mould btTitle="返回" btColor="#00b38a"></button-mould>
      </div>
    </div>
    <div v-else>
      <html-mould :imgSrc="imgSrc" :msg="msg"></html-mould>
      <div @click="cancleSign" class="cancleEnter" v-if="orSign">
        <button-mould btTitle="取消报名" btColor="#00b38a"></button-mould>
      </div>
      <div class="queryPeople" @click="queryPeople">
        <button-mould btTitle="查询活动人员名单"></button-mould>
      </div>
      <div class="select-wrapper" v-show="showSelect">
        <selects type="2" @selectOne="selectOne" @closeSelect="closeSelect"></selects>
      </div>
    </div>
  </div>

</template>
<script type="text/ecmascript-6">
  import htmlMould from '@components/htmlMould';
  import buttonMould from '@components/buttonMould';
  import selects from '@components/selectDialog';
  import signMould from '@components/signMould';
  import {mapGetters, mapActions} from 'vuex';
  import {getUsers} from 'services';
  export default {
    data () {
      return {
        time: '16:30-17:30',
        querySide: false,
        imgSrc: '../../../assets/images/copyfiles/smallRocket.png',
        msg: '您的报名已提交，请在16点后查询报告结果。',
        placeValue: 0,
        message: '非常抱歉，由于突发原因，今天的活动时间取消了，请您关注下次活动时间。',
        showSelect: false,
        orSign: false,
        signData: []
      }
    },
    components: {
      htmlMould,
      buttonMould,
      selects,
      signMould
    },
    mounted () {
      let signStatus = this.getToken();
      if (signStatus.status === 'success') {
        this.orSign = true;
      }
    },
    methods: {
      goBack() {
        this.querySide = false;
      },
      queryPeople() {
        this.showSelect = true
      },
      selectOne (value) {
        this.placeValue = value;
        this.showSelect = false;
        this.querySide = true;
        getUsers().then((res) => {
          if (res.data.return_code === '0') {
            console.log(res.data);
            this.time = res.data.time;
            this.signData = res.data.data;
          }
        });
      },
      closeSelect () {
        this.showSelect = false
      },
      cancleSign () {
        this.msg = '您的报名已取消';
        this.imgSrc = '../../../assets/images/copyfiles/cryingFace.png';
        this.removeToken();
        this.orSign = false;
      },
      ...mapGetters(['getToken']),
      ...mapActions(['removeToken'])
    }
  }
</script>
<style scoped lang="less" rel="stylesheet/less">
  @import "./style.less";
</style>

